import React,{Component} from "react"
import "./play.css"
import "./icon/iconfont.css"
 var startX, x = 0;
class Sound extends Component{
	constructor(props){
		super(props)
		this.state={
			data:''
		}
	}
	componentDidMount(){
	    var auido= document.getElementById("audio");
		var drag1= document.getElementById("drag1")
		
		setTimeout(function(){
			drag1.style.left=auido.volume*parseInt(drag1.parentNode.offsetWidth)+'px'
		},0)
		this.addListenTouch()
	}
	addListenTouch() {
	    document.getElementById("drag1").addEventListener("touchstart", this.touchStart, false);
	    document.getElementById("drag1").addEventListener("touchmove", this.touchMove, false);
	    document.getElementById("drag1").addEventListener("touchend", this.touchEnd, false);

	}
	touchStart(e) { 
	    e.preventDefault();
	    var touch = e.touches[0];
	    startX = touch.pageX; 
	}
	touchMove(e) { //滑动    
		var drag = document.getElementById("drag1");
		var auido= document.getElementById("audio");
		var speed = document.getElementById("speed1");
	    e.preventDefault();
	    var touch = e.touches[0];
	    x = touch.pageX - startX; //滑动的距离
		 let num=Number(auido.volume*parseInt(drag.parentNode.offsetWidth))
		 if(num+x>parseInt(drag.parentNode.offsetWidth)){
			 drag.style.left = drag.parentNode.offsetWidth-5 + "px";
			 speed.style.left = 0 + "px";
		 }else if(num+x<0){
			 drag.style.left = 0+ "px";
			 speed.style.left = 0 + "px";
		 }	 
		 else{			 
			 drag.style.left = num + x + "px"; //  
			 speed.style.left = (num + x) -parseInt(drag.parentNode.offsetWidth) + "px";
		 }
	}
	touchEnd(e) { //手指离开屏幕
	  var drag = document.getElementById("drag1");
	  var audio = document.getElementById("audio");
	    e.preventDefault();
	    var dragPaddingLeft = drag.style.left;
	    var change = dragPaddingLeft.replace("px", "");
	    let numDragpaddingLeft = parseInt(change);
	    var currentTime = (numDragpaddingLeft / (parseInt(drag.parentNode.offsetWidth)))
	    if(!currentTime){
			audio.currentTime=1
			return 
		}
		audio.volume = currentTime;
	}
	render(){
		return (
				<section className='soundbox'>
					<div className='sound'>
						<i className="iconfont icon-yinliang"></i>
						<section className="progressBar1" >
							<div className="progressBac1"></div>
							<div className="speed1" id="speed1"></div>
							<div className="drag1" id="drag1"></div>
						</section>
					</div>
				</section>
		)
	}
}
export default Sound